<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getProList } from '@/apis/product'
import GoodsItem from '@/components/GoodsItem.vue'
defineOptions({
  name: 'SearchListIndex'
})
const router = useRouter()
const route = useRoute()
// 回跳
const goBack = () => {
  router.go(-1)
}
// 获取地址框的搜索关键字search
const querySearch = computed(() => {
  return route.query.search
})

const proList = ref([])
const page =ref(1)
onMounted(async() => {
  const { data: { list } } = await getProList({
     categoryId: route.query.categoryId,
     goodsName: querySearch.value,
     page: page.value
  }) 
  proList.value = list.data
  console.log(proList.value)
})
</script>

<template>
  <div class="search">
     <!-- 顶部导航 -->
     <van-nav-bar title="商品列表" fixed left-arrow @click-left="goBack"/>
     <!-- 搜索框 -->
     <van-search
       readonly
       shape="round"
       background="#ffffff"
       v-model="querySearch"
       placeholder="搜索商品"
       show-action
       @click="router.push('/search')"
     >
       <template #action>
         <van-icon class="tool" name="apps-o"></van-icon>
       </template>
     </van-search>
     <!-- 排序选项按钮 -->
     <div class="sort-btns">
       <div class="sort-item">综合</div>
       <div class="sort-item">销量</div>
       <div class="sort-item">价格 </div>
     </div>
     <!-- 商品列表 -->
     <div class="goods-list">
      <GoodsItem v-for="item in proList" :key="item.goods_id" :item="item"/>
     </div>
  </div>
</template>

<style lang="less" scoped>
.search {
  padding-top: 46px;
  :deep(.van-nav-bar__title) {
    font-weight: normal;
  }
  :deep(.van-icon-arrow-left) {
    color: #333;
  }
  .tool {
    font-size: 24px;
    height: 40px;
    line-height: 40px;
  }
  .sort-btns {
    display: flex;
    height: 36px;
    line-height: 36px;
    .sort-item {
      text-align: center;
      flex: 1;
      font-size: 16px;
    }
  }
}
</style>